<template>
  <div class="business-info">
    <!-- top -->
    <div class="info">
      <div class="info-top flexRBC">
        <div :title="'id:' + business.id" class="left flexRBC">
          <img
            v-if="business.logoUrl"
            :src="fileBaseUrl + business.logoUrl"
            alt
          >
          <div>
            <div class="company-short-name">{{ business.businessName }}</div>
            <div class="company-name">{{ business.businessName }}</div>
          </div>
        </div>
        <el-button
          v-if="!$store.getters.banBtnList.includes('BTN_BUSSINESS_EDIT')"
          type="primary"
          size="medium"
          round
          @click="goBusinessInfoEdit"
        >修改商户资料</el-button>
      </div>
    </div>
    <el-tabs v-model="tabName" @tab-click="handleTabClick">
      <el-tab-pane label="门店列表" name="stores">
        <business-store-list />
      </el-tab-pane>
      <el-tab-pane
        v-if="isBusinessDistrictMainStore"
        label="门店分类"
        name="classification"
      >
        <business-classification-list :business="business" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="商户流量余额记录" :visible.sync="hisVisible" width="80%">
      <BusinessFlowHis v-if="hisVisible" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BusinessStoreList from './components/BusinessStoreList'
import BusinessClassificationList from './components/BusinessClassificationList'
import { getPackageAndBalance, mercPkgOverLayInfo } from '@/api/business'
import { getDetail } from '@/api/BusineCenter'
export default {
  components: {
    BusinessStoreList,
    BusinessClassificationList
  },
  data() {
    return {
      hisVisible: false,
      flowInfo: {},
      hisData: {},
      // 配置
      tabName: 'stores',
      // 数据
      vipInfoCard_1: [
        { name: '签约套餐', value: '/' },
        { name: '门店数量', value: '/' },
        { name: '行业', value: '/' },
        { name: '地址', value: '/' }
      ],
      vipInfoCard_2: [
        { name: '负责人', value: '/' },
        { name: '手机号码', value: '/' },
        { name: '联系邮箱', value: '/' }
      ],

      business: {
        id: ''
      },
      superArr: []
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'businessInfo']),
    isBusinessDistrictMainStore({ business }) {
      console.log('businessbusinessbusiness', business)
      return business?.pubTag === 1 && business?.shopType === 3
    }
  },
  mounted() {
    this.fetchData()
    // this.getFlow();
  },
  methods: {
    // 叠加详情
    supeInfo() {
      this.getMercPkgOverLayInfo()
    },
    // 叠加套餐列表接口
    getMercPkgOverLayInfo() {
      mercPkgOverLayInfo({
        merchantId: this.businessInfo.syncTmpMerchantId
      }).then((res) => {
        // console.log('叠加套餐列表接口+++++', res)
        if (res.succeed) {
          this.superArr = res.data
        }
      })
    },
    getFlow() {
      if (!this.businessInfo.syncTmpMerchantId) {
        console.warn('不存在同步数据 syncTmpMerchantId')
        return
      }
      getPackageAndBalance({
        merchantId: this.businessInfo.syncTmpMerchantId
      }).then((res) => {
        console.log('res+++++++++', res)
        this.flowInfo = res.data
      })
    },
    showHis() {
      if (!this.businessInfo.syncTmpMerchantId) {
        console.warn('不存在同步数据 syncTmpMerchantId')
        return
      }
      // 展示流量记录
      this.hisData = {}
      this.hisVisible = true
    },
    /**
     * 获取数据
     */
    // 获取商户信息
    async fetchData() {
      let detail = {}
      const res = await this.$store.dispatch('GetInfo')
      if (res?.data) {
        detail = {
          ...res?.data
        }
      }
      const params = {
        id: this.businessInfo.syncTmpMerchantId
      }
      await getDetail(params).then((res) => {
        detail = {
          ...detail,
          ...res?.data
        }
        this.business = detail
        this.vipInfoCard_1 = [
          { name: '门店数量', value: this.business.shopNum },
          { name: '行业', value: this.business.firstClass },
          { name: '地址', value: this.business.address }
        ]
        this.vipInfoCard_2 = [
          { name: '负责人', value: this.business.principal },
          { name: '手机号码', value: this.business.mobilePhone },
          { name: '联系邮箱', value: this.business.email }
        ]
      })
    },

    /**
     * 按钮组
     */
    //  跳转
    goBusinessInfoEdit() {
      this.$router.push({
        name: 'BusinessInfoEdit',
        params: {
          business: this.business
        }
      })
    },

    // 切换tab栏
    handleTabClick(tab, event) {}
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.flowInfoContent {
  display: flex;
  /deep/.el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .moneyColor {
    color: #ffb72f;
  }
}
.info {
  padding: 24px 30px;
  border-radius: 5px 5px 0 0;
  background-color: #fff;
  &-top {
    padding-bottom: 24px;
    border-bottom: 1px solid #e7e7e7;
    img {
      vertical-align: top;
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 50%;
      border: 1px solid #e7e7e7;
    }
    .company-short-name {
      font-size: 24px;
      margin-bottom: 5px;
      font-weight: bold;
    }
    .company-name {
      font-size: 14px;
    }
  }
  &-content {
    margin: 24px 0 0 45px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
/* reset element*/
.business-info {
  /deep/.el-tabs__header {
    padding-left: 30px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
  .el-tabs__active-bar {
    height: 4px;
  }
}
</style>
